<template>
  <el-drawer
    :title="title"
    :visible.sync="drawer"
    :direction="direction"
    :before-close="handleClose"
    destroy-on-close
    custom-class="drawerClass"
    size="70%"
  >
    <div style="padding: 20px">
      <el-descriptions
        class="margin-top"
        title=""
        :column="2"
        size="medium"
        border
      >
        <el-descriptions-item>
          <template slot="label">
            <i class="iconfont icon-xiaoshou-"></i>
            商户
          </template>
          {{ entity.Title }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            姓名
          </template>
          {{ entity.RealName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="iconfont icon-xiaoshou-"></i>
            销售方/ 赊货方
          </template>
          <el-tag v-if="entity.Type == 0" type="warning">赊货方</el-tag>
          <el-tag v-if="entity.Type == 1" type="primary">销售方</el-tag>
          <div v-if="entity.Type == 2">
            <el-tag style="margin-right: 10px" type="warning">赊货方</el-tag>
            <el-tag type="primary">销售方</el-tag>
          </div>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            注册电话
          </template>
          {{ entity.Phone }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            地址
          </template>
          {{ entity.Address }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="iconfont icon-bianma"></i>
            身份证号
          </template>
          {{ entity.IdCard }}
        </el-descriptions-item>
      </el-descriptions>

      <!-- <div v-if="entity.FrontIdPhoto"> -->
        <div>
        <el-descriptions
          class="image"
          direction="vertical"
          title=""
          :column="1"
          size="medium"
          border
        >
          <el-descriptions-item style="border: 2px solid red;">
            <template slot="label">
              <i class="el-icon-user"></i>
              身份证反正面
            </template>
            <div style="display: flex; cursor: pointer;min-height: 20px;">
              <div v-show="!entity.FrontIdPhoto && !entity.ReverseIdOPhoto" style="font-size: 12px;color:#999;">暂无数据</div>
              <div v-show="entity.FrontIdPhoto" style="width: 300px; height: 200px" @click="imgViewChange(entity.FrontIdPhoto)">
                <img
                  style="width: 100%; height: 100%"
                  :src="entity.FrontIdPhoto"
                  alt=""
                />
              </div>
              <div v-show="entity.ReverseIdOPhoto" style="width: 300px; height: 200px; margin-left: 20px" @click="imgViewChange(entity.ReverseIdOPhoto)">
                <img
                  style="width: 100%; height: 100%"
                  :src="entity.ReverseIdOPhoto"
                  alt=""
                />
              </div>
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- <div v-if="entity.CardPhoto"> -->
        <div>
        <el-descriptions
          class="image"
          direction="vertical"
          title=""
          :column="1"
          size="medium"
          border
        >
          <el-descriptions-item style="border: 2px solid red">
            <template slot="label">
              <i class="iconfont icon-xiaoshou-"></i>
              营业执照
            </template>
            <div v-show="!entity.CardPhoto" style="font-size: 12px;color:#999;">暂无数据</div>
            <img v-show="entity.CardPhoto" style="width: 300px; cursor: pointer;" :src="entity.CardPhoto" alt="" @click="imgViewChange(entity.CardPhoto)"/>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>

    <div style="height: 50px"></div>
    <div
      :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '5px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 99999,
      }"
    >
      <el-button @click="drawer = false">取消</el-button>

      <!-- 图片预览组件 -->
      <img-view
        :show="imageViewerVisible"
        :url-list="imageViewerList"
        @close="imageViewerVisible = false"
      >
      </img-view>
    </div>
  </el-drawer>
</template>

<script>
import Upload from "@/components/upload.vue";
// 引入图片预览组件
import ImgView from "@/components/imgView.vue";
const regExp = new RegExp("^1[3456789]\\d{9}$"); // 手机号正则
export default {
  props: {
    parentObj: { type: Object },
  },
  components: {
    Upload,
    ImgView,
  },
  data() {
    return {
       // 预览的图片数据
       imageViewerList: [],
      // 是否展示图片预览组件
      imageViewerVisible: false,
      // 加载
      loading: false,
      // 是否禁止上传
      uploadDisabled: false,
      // 上传路径
      uploadUrl: "https://api.yoojet.com/Base_Manage/Upload/Filleimag",
      // 上传后的图片数据
      uploadFileListDataUrl: [],
      drawer: false,
      direction: "rtl",
      entity: {},
      btnLoading: false,
      title: "",
      timeout: null,
    };
  },
  methods: {
     // 上传图片预览
    // 图片预览
    imgViewChange(row) {
      // 将展示的图片到数组
      this.imageViewerList[0] = row;
      // 显示预览组件
      this.imageViewerVisible = true;
    },
    // 上传是否成功
    uploadSuccessChange(fileList, newFileListData) {
      console.log("上传是否成功", fileList, newFileListData);
    },

    // 内审附件删除
    handleRemoveChange(fileList, newFileListData) {
      console.log("上传删除", fileList, newFileListData);
    },
    init() {
      this.entity = {};
      this.drawer = true;
      // if (this.$refs['form']) {
      //   this.$refs['form'].clearValidate()
      // }
    },

    openForm(MerchantId) {
      this.init();
      this.title = "资质详情";
      // 获取资质详情数据
      this.getTheData(MerchantId);
    },
    handleClose(done) {
      done();
    },
    handleSelect(item) {
      console.log(item);
    },
    getTheData(MerchantId) {
      var that = this;
      // 显示加载状态
      this.loading = true;
      this.$http
        .post("/Base/Bank_Info/GetCompanyDetail", { id: MerchantId })
        .then((res) => {
          console.log("获取资质详情", res);
          if (res.Success) {
            this.entity = res.Data;
            setTimeout(function () {
              that.loading = false;
            }, 600);
          } else {
            this.$message.error(res.Msg);
          }
        });
    },
    // 保存
    handleSubmit() {
      console.log(this.entity);
      this.$refs["form"].validate((valid) => {
        if (!valid) {
          return;
        }
        this.btnLoading = true;
        this.$message.success("操作成功");
        this.parentObj.getDataList();
        this.drawer = false;

        return;
        this.$http
          .post("/Base_Manage/Base_User/SaveData", this.entity)
          .then((res) => {
            this.btnLoading = false;
            if (res.Success) {
              this.$message.success("操作成功");
              this.parentObj.getDataList();
              this.drawer = false;
            } else {
              this.$message.error(res.Msg);
            }
          });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.drawerClass {
  padding: 10px;
}
</style>
